<template>
	<view class="rf-category">
		<view class="select-mask" v-if="currentMenuId" @tap="tapMaskHandler"  @touchmove.stop.prevent="touchMaskHandler"></view>
		<view class="header-top-fixed" :style="'top:' + titleBarHeight + 'px;'" id="fixedTop">
			<!--顶部搜索导航栏-->
			<view class="input-box">
				<view class="home-text" :class="'text-'+themeColor.name">资料</view>
				<view class="input-block">
					<input
						@tap.stop="toSearch"
						disabled
						:value="hotSearchDefault || '请输入关键字'"
						style="color:#888;"
						placeholder-style="color:#ccc;"
					/>
					<view class="iconfont iconsousuo2" @tap.stop="toSearch"></view>
				</view>
			</view>
			<!-- 下拉筛选 -->
			<view class="select-block">
				<!-- <view class="select-v-item" @tap="showSelectHandler('simple')">
					综合<view class="icon-sj"></view>
				</view> -->
				<view class="select-v-item" @tap="showSelectHandler('complex')">
					资料分类<view class="icon-sj"></view>
				</view>
			</view>
			<!-- 下拉具体筛选 -->
			<!-- 一级分类 -->
			<view class="simple-select-block" v-if="currentMenuId == 'simple'">
				<view
					:class="currentSortId == item.id ? 'active': ''"
					v-for="(item,index) in simpleMenuList"
					:key="index"
					@click="selectcategoryHandler(item,'simple')"
				>{{item.name}}</view>
			</view>
			<!-- 二级分类 -->
			<view class="cpmplex-select-block" v-if="currentMenuId == 'complex'">
				<view class="complex-left-block">
					<view
						:class="current_complex_CateId == item.id ? 'active': ''"
						v-for="(item,index) in complexMenuList"
						:key="index"
						@click="selectcategoryHandler(item,'current_complex_CateId')"
					>{{item.name}}</view>
				</view>
				<view class="complex-right-block">
					<view
						:class="currentCateId == item.id ? 'active': ''"
						v-for="(item,index) in complexMenuSecondList"
						:key="index"
						@click="selectcategoryHandler(item,'complex')"
					>{{item.name}}</view>
				</view>
			</view>
		</view>
		<view class="list-block" :style="'padding-top:' + fixTopHeight + 'px;'">
			<navigator class="list-item" v-for="(item,index) in courseList" :key="index" :url="`/pages/dataList/detail?id=${item.book_id}`">
				<view class="list-left-block">
					<view class="list-tag">{{item.label}}</view>
					<!-- <img class="avatar-list" src="@/static/ppt.png"></img> -->
					<view class="avatar-list"></view>
				</view>
				<view class="list-right-block">
					<view class="list-r-title">{{item.title}}</view>
					<view class="list-r-cont">
						<rich-text :nodes="item.detail"></rich-text>
					</view>
					<view class="list-r-d-block">
						<view>{{item.add_time}}</view>
						<view >{{item.read_count}}次浏览</view>
					</view>
				</view>
			</navigator>

			<view style="height: 120upx;"></view>
		</view>
		<rf-empty
			:bottom="bottom"
			:info="'暂无资料'"
			v-if="courseList.length === 0 && !loading"
		></rf-empty>
		<!--加载动画-->
		<!-- <rfLoading isFullScreen :active="loading"></rfLoading> -->
	</view>
</template>
<script>
import { bookType,
	bookList, } from '@/api/product';
import { mapMutations } from 'vuex';
export default {
	components: {
	},
	data() {
		return {
			simpleMenuList: [
				{name: '最新', id: 1},
				{name: '最热', id: 2},
				{name: '价格升序', id: 3},
				{name: '价格降序', id: 4},
			],
			complexMenuList: [],
			complexMenuSecondList: [],
			currentCateId: '',
			currentSortId: '',
			current_complex_CateId: '',
			currentMenuId: '',
			hotSearchDefault: '', // 搜索默认关键字
			showCategoryIndex: 0, // 一级菜单高亮显示序号
			loading: true,
			courseList: [],
			price: '',
			total_sales: '',
			loadingType: 'more',
			page: 1,
			limit: 20,
			productLoading: true,
			type:1,
			cate_id:'',
			titleBarHeight: 0,
			fixTopHeight: 44
		};
	},
	computed: {
		bottom () {
			let bottom = 0;
			/*  #ifdef H5  */
      bottom = 90;
			/*  #endif */
			return bottom;
		}
	},
	filters: {
		filterTotalSales(val) {
			if (val > 10000) {
				val = `${(val / 10000).toFixed(2)}w`;
			}
			return val;
		}
	},
	// 每次页面显示 执行该方法
	onLoad() {
	},
	onShow() {
		this.initData();
	},
	onReady() {
		//#ifdef H5
		this.titleBarHeight = 44
		//#endif
		let self = this;
		const query = uni.createSelectorQuery().in(this);
		query.select('#fixedTop').boundingClientRect(data => {
			self.fixTopHeight = data.height
		}).exec();
	},
	methods: {
		showSelectHandler(id) {
			this.currentMenuId = this.currentMenuId == id ? '' : id
		},
		tapMaskHandler(e){
			this.currentMenuId = '';
		},
		touchMaskHandler(){},
		selectcategoryHandler(item, tag){
			if (tag == 'simple') {
				this.currentSortId = item.id
			} else if (tag == 'complex') {
				// 右侧二级分类
				this.cate_id = item.id
				this.type = 0
				this.currentCateId = item.id
				this.getProductList()
				this.currentMenuId=''
			} else if (tag == 'current_complex_CateId') {
				// 左侧一级分类
				this.current_complex_CateId = item.id
				this.complexMenuSecondList = item.children;
				if(item.name =='全部'){
					this.cate_id = 0
					this.type= 1
					this.getProductList()
					this.currentMenuId=''
				}else if (this.complexMenuSecondList.length == 0) {
					this.cate_id = item.id
					this.type = 0
					this.getProductList()
					this.currentMenuId=''
				}
			}
		},
		...mapMutations(['setCartNum']),
		// 跳转至商品列表
		navTo(route) {
			this.$mRouter.push({ route });
		},
		// 数据初始化
		async initData() {
			await this.getProductCate();
		},
		// 获取商品分类
		async getProductCate(type) {
			await this.$http.get(`${bookType}`)
				.then(async r => {
					if (type === 'refresh') {
						uni.stopPullDownRefresh();
					}
					this.complexMenuList = r.data;
					this.complexMenuList.unshift({
						id: 0,
						name:'全部',
						children: []
					})
					if (this.complexMenuList.length > 0) {
						this.complexMenuSecondList = this.complexMenuList[0].children;
						this.current_complex_CateId = this.complexMenuList[0].id
						this.currentCateId = this.complexMenuList[0].children[0] ? this.complexMenuList[0].children[0].id : ''
					}
					this.page = 1;
					await this.getProductList();
					this.loading = false;
				})
				.catch(() => {
					if (type === 'refresh') {
						uni.stopPullDownRefresh();
					}
					this.loading = false;
				});
		},
		// 获取产品列表
		async getProductList() {
			const params = {
				type: this.type,
				search: this.hotSearchDefault,
				page: this.page,
				limit: this.limit,
				cate_id:this.cate_id
			};
			await this.$http.get(`${bookList}`, params)
				.then(res => {
					this.courseList = res.data;
					// console.log(this.courseList)
				});
		},
		// 跳转至搜索详情页
		toSearch() {
			this.$mRouter.push({
				route: `/pages/index/search/search?data=${JSON.stringify(this.search)}`
			});
		},
		getMoreProductList () {
		  if (this.loadingType === 'nomore' || this.categoryProductList.length === 0) return;
		  this.page++;
		  this.getProductList();
		}
	}
};
</script>
<style lang="scss">
page {
	background-color: $color-white;
	height: 100%;
}
.home-text{
	font-size: 36upx;
	font-weight: bold;
	margin-right: 20upx;
	line-height: 60upx;
}
.rf-category{
	height: 100%;
	background-color: #fff;
	.input-box {
		position: relative;
		display: flex;
		padding: 10upx 20upx;
		background-color: #fff;
		.iconfont {
			font-weight: 500;
		}
		.iconsousuo2 {
			position: absolute;
			top: 0;
			left: 10upx;
			width: 60upx;
			line-height: 60upx;
			font-size: 34upx;
			color: #c0c0c0;
		}
		.input-block{
			position: relative;
			flex: 1;
			height: 60upx;
			background-color: #f5f5f5;
			border-radius: 30upx;
			color: #888;
		}
		input {
			width: 100%;
			height: 60upx;
			text-indent: 50upx;
			font-size: 28upx;
			outline: none;
		}
	}
	.select-block{
		padding: 20upx 20upx 10upx 20upx;
		display: flex;
		height: 80upx;
		background-color: #fff;
		margin-top: -2upx;
	}
	.select-v-item{
		width: 50%;
	}
	.icon-sj{
		display: inline-block;
		width: 0;
		height: 0;
		margin-left: 10upx;
		vertical-align: middle;
		border-left: 10upx solid transparent;
		border-right: 10upx solid transparent;
		border-top: 10upx solid #000;
	}
	.simple-select-block{
		margin-top: -2upx;
		background-color: #fff;
		padding: 10upx 20upx;
		max-height: 500upx;
		overflow-y: auto;
		view{
			padding: 20upx 0;
		}
		.active{
			color: red;
		}
	}
	.header-top-fixed{
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		z-index: 9;
	}
	.cpmplex-select-block{
		margin-top: -2upx;
		display: flex;
	}
	.complex-left-block{
		background-color: rgb(247,247,247);
		max-height: 500upx;
		overflow-y: auto;
		view{
			padding: 26upx 20upx;
		}
		.active{
			background-color: #fff;
			color: red;
		}
	}
	.complex-right-block{
		margin-left: -2upx;
		background-color: #fff;
		flex: 1;
		max-height: 500upx;
		overflow-y: auto;
		.active{
			color: red;
		}
		view{
			padding: 26upx 20upx 26upx 40upx;
		}
	}
}
.select-mask{
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 9;
	background-color: rgba(0,0,0,.3);
}
.list-block{
	padding-top: 80upx;
	background-color: #fff;
}
.list-item{
	display: flex;
	padding: 30upx 20upx 0 20upx;
	.list-left-block{
		width: 40upx;
		height: 40upx;
		position: relative;
	}
	.avatar-list{
		width: 40upx;
		height: 40upx;
		background: url(../../static/ppt.png) no-repeat center;
		background-size: contain;
	}
	.list-right-block{
		flex: 1;
		margin-left: 40upx;
		padding-bottom: 20upx;
		border-bottom: solid 2upx #ccc;
	}
	.list-r-title{
		font-size: 30upx;
		line-height:40upx;
		font-weight: bold;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 3; //行数
		-webkit-box-orient: vertical;
		// height: 120upx
	}
	.list-r-cont{
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2; //行数
		-webkit-box-orient: vertical;
		margin: 10upx 0;
		color: #999;
	}
	.list-r-d-block{
		margin-top: 15upx;
		display: flex;
		justify-content: space-between;
		font-size: 22upx;
		color: #ccc;
		view{
			line-height: 1em;
		}
	}
	.list-status{
		color: red;
		font-weight: bold;
		font-size: 30upx;
	}
	.list-tag{
		position: absolute;
		left: 0;
		top: 0;
		background-color: red;
		color: #fff;
		width: 100upx;
		text-align: center;
		font-size: 20upx;
	}
}
</style>
